<template>
    <div>
        <el-table
            :data="
                parkings.filter(
                    (data) =>
                        !search ||
                        data.lessorsId.account
                            .toLowerCase()
                            .includes(search.toLowerCase()) ||
                        data.number
                            .toLowerCase()
                            .includes(search.toLowerCase()) ||
                        data.address
                            .toLowerCase()
                            .includes(search.toLowerCase())
                )
            "
            style="width: 100%"
        >
            <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.time }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.address
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="车牌号" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.number
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.lessorsId.account }}</p>
                        <p>产权信息:{{scope.row.property}}年</p>
                        <p>出租周期:{{ scope.row.cycle }}</p>
                        <p>出租价格:{{ scope.row.price }}元</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{
                                scope.row.lessorsId.account
                            }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1" style="margin-left: 10px"
                        >未审核</span
                    >
                    <span
                        v-else-if="scope.row.state == 2"
                        style="margin-left: 10px"
                        >审核通过(未上架)</span
                    >
                    <span
                        v-else-if="scope.row.state == 3"
                        style="margin-left: 10px"
                        >审核未通过</span
                    >
                    <span
                        v-else-if="scope.row.state == 4"
                        style="margin-left: 10px"
                        >已上架(未出租)</span
                    >
                    <span
                        v-else-if="scope.row.state == 5"
                        style="margin-left: 10px"
                        >已出租</span
                    >
                </template>
            </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        v-if="scope.row.state == 2"
                        @click="shelves({_id:scope.row._id,state:4})
                        "
                        >上架</el-button
                    >
                     <el-button
                        size="mini"
                        type="primary"
                         v-else-if="scope.row.state != 5 &&scope.row.state ==4"
                        @click="removal({_id:scope.row._id,state:2})
                        "
                        >下架</el-button
                    >
                     <el-button
                        size="mini"
                        type="primary"
                        v-else-if="scope.row.state == 5"
                        :disabled="true"
                        >出租中</el-button
                    >
                     <!-- <el-button
                        size="mini"
                        type="primary"
                         v-else-if="scope.row.state != 5 &&scope.row.state ==4"
                        @click="
                        "
                        >下架</el-button
                    > -->
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"
                    />
                </template>
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        @click="
                            showEditDialog(scope.row);
                            dialogFormVisible = true;
                        "
                        >编辑</el-button
                    >
                    <el-dialog
                        title="编辑内容"
                        :visible.sync="dialogFormVisible"
                    >
                        <el-form
                            :model="editcarPort"
                            ref="editcarPort"
                            label-width="70px"
                        >
                            <el-form-item label="地址栏" prop="address">
                                <el-input
                                    v-model="editcarPort.address"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="车牌号" prop="number">
                                <el-input
                                    v-model="editcarPort.number"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="出租周期" prop="cycle">
                                <el-input
                                    v-model="editcarPort.cycle"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="出租价格" prop="price">
                                <el-input
                                    v-model="editcarPort.price"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false"
                                >取 消</el-button
                            >
                            <el-button type="primary" @click="confirm()"
                                >确 定</el-button
                            >
                        </div>
                    </el-dialog>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="deleteParkingsById(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[7, 10, 15]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapState: parkingsMapState,
    mapMutations: parkingsMapMutations,
    mapActions: parkingsMapActions,
} = createNamespacedHelpers("parkingsById");

export default {
    data() {
        return {
            search: "",
            dialogFormVisible: false,
            formLabelWidth: "120px",
            editcarPort: {
                address: "",
                number: "",
                cycle: "",
                price: "",
            },
        };
    },
    mounted() {
        this.changeLessorsId(localStorage.userJudge.split(',')[0]);
        this.getParkingsById();
    },
    watch: {
        currentPage() {
            this.getParkingsById();
        },
        pageSize() {
            this.getParkingsById();
        },
    },
    computed: {
        ...parkingsMapState(["parkings", "total", "currentPage", "pageSize"]),
        // pageSize: {
        //     get() {
        //         return this.$store.state.parkings.pageSize;
        //     },
        //     set(val) {
        //         this.changePageSize(val);
        //     },
        // },
    },
    methods: {
          handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPage(val);
        },
        ...parkingsMapMutations([
            "changePageSize",
            "changeCurrentPage",
            "changeData",
             'changeLessorsId',
              "changeAudit"
        ]),

        ...parkingsMapActions([
            "getParkingsById",
            "deleteParkingsById",
            "confirmChange",
            "updataAuditParkings"
        ]),
        //模态框渲染
        showEditDialog(scope) {
            //宽展变更地址
            this.editcarPort = {...scope};
            console.log(12, this.editcarPort);
            this.dialogFormVisible = true;
        },
        //编辑修改
        async confirm() {
            const data = await this.confirmChange(this.editcarPort);
            console.log(2223, data);
            this.dialogFormVisible = false;
            this.getParkingsById();
        },
        //上架
           async shelves({_id,state}) {
            const data = await this.updataAuditParkings({_id,state});
            this.getParkingsById();
        },    

        //下架
          async removal({_id,state}) {
            const data = await this.updataAuditParkings({_id,state});
            this.getParkingsById();
        },   
    },
};
</script>